<template>
  <div class="tabsBox">
    <!-- 下一步处理人选择操作 -->
    <Wf_ProcessNext
      :taskid="taskid"
      :processinstanceid="processinstanceid"
      :category="category"
      :isEditModel="isEditModel"
    >
    </Wf_ProcessNext>

    <!-- 当前为受理环节 -->
    <a-tabs
      :tabBarGutter="30"
      type="card"
      v-if="categoryType == 'accept'"
      :activeKey="activeKey"
      @change="changeTab"
      tabPosition="top"
      :tabBarStyle="{
        backgroundColor: '#f5f6f9',
        border: 'none',
        height: '50px'
      }"
      :forceRender="true"
    >
      <a-tab-pane v-for="item in tabList" :key="item.key" :tab="item.label">
        <ApplyCaseHandleProcedure
          v-if="item.key != 'accept_change'"
          :key="item.key"
          :ref="item.key"
          :applyid="applyid"
          :busiKey="item.config.value"
          :category="category"
          :btnLabel="item.btnLabel"
          :isEditModel="isEditModel"
          :processinstanceid="processinstanceid"
          @reload="init"
        />
        <div class="case" v-else>
          <a-tabs
            :activeKey="changePersonTabKey"
            @change="changePersonTab"
            tabPosition="top"
            :forceRender="true"
            :tabBarStyle="{
              backgroundColor: '#fff',
              border: 'none'
            }"
          >
            <a-tab-pane v-for="personTab in changePersonTabList" :key="personTab.key" :tab="personTab.label">
              <ChangePersonProcedure
                :key="personTab.key"
                :ref="personTab.key"
                :applyid="applyid"
                :busiKey="personTab.config.value"
                :category="category"
                :btnLabel="personTab.btnLabel"
                :isEditModel="isEditModel"
                :processinstanceid="processinstanceid"
                @reload="init"
              />
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-tab-pane>
    </a-tabs>

    <!-- 当前为执行环节 -->
    <!-- <a-tabs v-else-if="categoryType == 'execute'" :activeKey="activeKey" @change="changeTab" tabPosition="top" :forceRender="true">
      <a-tab-pane v-for="item in tabList" :key="item.key" :tab="item.label">
        <ExecuteHandleProcedure
          :key="item.key"
          :ref="item.key"
          :applyid="applyid"
          :busiKey="item.config.value"
          :category="category"
          :btnLabel="item.btnLabel"
          :isEditModel="isEditModel"
          :processinstanceid="processinstanceid"
          :sonStatus="sonStatus"
          :reason="reason"
          :admreview="admreview"
          @reload="init"
        />
      </a-tab-pane>
    </a-tabs> -->

    <!-- 当前为审理环节 -->
    <a-tabs
      type="card"
      v-else
      :activeKey="activeKey"
      @change="changeTab"
      tabPosition="top"
      :forceRender="true"
      :tabBarGutter="20"
    >
      <a-tab-pane v-for="item in tabList" :key="item.key" :tab="item.label">
        <!-- 受理前调解上传材料组件 -->
        <!-- 当前不为决定 -->
        <CaseHandleProcedure
          v-if="
            item.key != 'hear_decision' &&
            item.key != 'hear_survey' &&
            item.key != 'hear_thirder' &&
            item.key != 'hear_change'
          "
          :key="item.key"
          :ref="item.key"
          :applyid="applyid"
          :busiKey="item.config.value"
          :category="category"
          :btnLabel="item.btnLabel"
          :isEditModel="isEditModel"
          :processinstanceid="processinstanceid"
          :sonStatus="sonStatus"
          :reason="reason"
          @reload="init"
        />
        <!-- 当前为调查步骤时，调查步骤为多个步骤的合并 -->
        <div class="survey" v-else-if="item.key == 'hear_survey'">
          <a-tabs :activeKey="surveyTabKey" @change="changeSurveyTab" tabPosition="top" :forceRender="true">
            <a-tab-pane v-for="surveytab in surveyTabList" :key="surveytab.key" :tab="surveytab.label">
              <CaseHandleProcedure
                :key="item.key"
                :ref="surveytab.key"
                :applyid="applyid"
                :busiKey="surveytab.config.value"
                :category="category"
                :btnLabel="surveytab.btnLabel"
                :isEditModel="isEditModel"
                :processinstanceid="processinstanceid"
                :sonStatus="sonStatus"
                :reason="reason"
                @reload="init"
              />
            </a-tab-pane>
          </a-tabs>
        </div>

        <!-- 当前为第三人审批流程 -->
        <ThirdPersonProcessMaterial
          v-else-if="item.key == 'hear_thirder'"
          :applyid="applyid"
          :category="category"
          :isEditModel="isEditModel"
          :processinstanceid="processinstanceid"
          :sonStatus="sonStatus"
        >
        </ThirdPersonProcessMaterial>

        <!-- 当前为决定子流程阶段 -->
        <div v-else-if="item.key == 'hear_decision'">
          <CaseHandleDecision
            :key="item.key"
            :ref="item.key"
            :applyid="applyid"
            :busiKey="item.config.value"
            :category="category"
            :btnLabel="item.btnLabel"
            :isEditModel="isEditModel"
            :processinstanceid="processinstanceid"
            :sonStatus="sonStatus"
            :decisiontype="decisiontype"
            :reason="reason"
            @reload="init"
          >
          </CaseHandleDecision>
        </div>

        <!-- 审理 变更办案人员 -->
        <div class="case" v-else-if="item.key == 'hear_change'">
          <a-tabs :activeKey="changePersonTabKey" @change="changePersonTab" tabPosition="top" :forceRender="true">
            <a-tab-pane v-for="personTab in changePersonTabList" :key="personTab.key" :tab="personTab.label">
              <CaseHandleChangePerson
                :key="personTab.key"
                :ref="personTab.key"
                :applyid="applyid"
                :busiKey="personTab.config.value"
                :category="category"
                :btnLabel="personTab.btnLabel"
                :sonStatus="sonStatus"
                :isEditModel="isEditModel"
                :processinstanceid="processinstanceid"
                @reload="init"
              />
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import {
  tabMenu,
  getCategoryType,
  hear_restoreProctype,
  survey_category,
  accept_change
} from '@/utils/handlecase/tab_list.js'
import { getSonStatusByIds } from '@/api/accept/apl_admreview'
import { ModelKey } from '@/enumeration/ModelKey.js'
import { Tp_categoryValue } from '@/enumeration/Tp_category.js'
import { Tp_proctypeValue } from '@/enumeration/Tp_proctype.js'
import { viewApl_admre_audit } from '@/api/accept/apl_admre_audit'
import { getProcessVariable, getHandleParams } from '@/api/workflow/wf_ProcessInstance.js'
export default {
  props: {
    applyid: {
      type: String,
      default: '',
      required: true
    },
    taskid: {
      type: String,
      required: true
    },
    category: {
      // 流程状态
      type: String
    },
    processinstanceid: {
      type: String,
      default: '',
      required: true
    },
    isEditModel: {
      // 是否是编辑模式
      type: Boolean,
      default: false,
      required: true
    }
  },
  data () {
    return {
      activeKey: undefined, // 当前激活的key
      tabList: [], // 渲染的处理菜单
      tabMenu: tabMenu,
      sonStatus: [], // 子流程状态
      decisiontype: undefined, // 决定类型
      reason: '', // 案由
      surveyTabList: [], // 调查步骤的tab菜单
      surveyTabKey: undefined, // 调查步骤激活的key
      hearingTabKey: undefined, // 听证步骤激活的key
      categoryType: '', // 当前的环节： 受理还是审理
      ModelKey: ModelKey,
      admreview: {}, // 主记录数据
      changePersonTabList: [], // 变更办案人员步骤tab菜单
      changePersonTabKey: undefined, // 变更步骤激活的key
      isSecondDepr: false
    }
  },
  async created () {
    // accept: 'accept',
    // // 审理
    // hear: 'hear',
    // // 调解上传
    // mediate_upload: 'mediate_upload',
    // this.category = 'hearview';
    // this.category = 'executeview';
    // this.category = 'hear';
    await this.init()
    // 重定向办案页面指定tab
    this.redirectCaseTab()
  },
  // 深度监听主tab的变化，若是主tab为对应的调查tab，则对应的子tab也要进行切换
  watch: {
    activeKey: {
      handler (newValue, oldVal) {
        // 若新的值是调查菜单
        let _this = this
        if (newValue == 'hear_survey') {
          // 若新菜单为调查菜单
          // 判断当前的步骤是否是内部的步骤，若是，则自动调整，若不是则默认是第一个
          this.surveyTabKey = this.surveyTabList[0].key
          if (survey_category.includes(this.category)) {
            this.surveyTabList.forEach(item => {
              if (item.categoryKey == _this.category) {
                this.surveyTabKey = item.key
              }
            })
          }
        }
        // 若新的值是变更申请人
        if (newValue == 'accept_change') {
          // 若新菜单为变更申请人菜单
          // 判断当前的步骤是否是内部的步骤，若是，则自动调整，若不是则默认是第一个
          this.changePersonTabKey = this.changePersonTabList[0].key
          if (this.isSecondDepr) {
            this.changePersonTabKey = this.changePersonTabList[1].key
          }
        }
        // 若新的值是审理变更申请人
        if (newValue == 'hear_change') {
          // 若新菜单为变更申请人菜单
          // 判断当前的步骤是否是内部的步骤，若是，则自动调整，若不是则默认是第一个
          this.changePersonTabKey = this.changePersonTabList[0].key
          if (this.isSecondDepr) {
            this.changePersonTabKey = this.changePersonTabList[1].key
          }
        }
      },
      deep: true // 深度监听
    }
  },
  methods: {
    async init () {
      // 获取当前的环节
      this.categoryType = this.category ? getCategoryType(this.category) : 'hear'
      if (this.categoryType == 'accept') {
        this.acceptInit()
      } else if (this.categoryType == 'execute') {
        // 重新加载对应的tab菜单
        // this.executeInit()
        this.hearInit()
      } else {
        if (this.category == 'hear') {
          // 判断之前的上一级的路由
          if (this.$route.name == 'HearExamineHandleOperation') {
            // 非审理中的页面
            // this.executeInit()
            this.hearInit()
          } else {
            this.hearInit()
          }
        } else {
          this.hearInit()
        }
      }
    },
    // 重定向办案页面指定tab
    redirectCaseTab () {
      // toCaseTabKey 代表指定跳转tab
      // console.log('重定向办案页面指定tab', this.$route.query)
      if (this.$route.query && this.$route.query.queryParam && this.$route.query.queryParam.toCaseTabKey) {
        this.activeKey = this.$route.query.queryParam.toCaseTabKey
      }
    },
    // 受理环节初始化
    async acceptInit () {
      const _this = this
      if (this.category in this.tabMenu) {
        // 深拷贝一份
        const tabCopyList = JSON.parse(JSON.stringify(this.tabMenu[this.category]))
        // 对于 变更处理人的特殊处理
        const changePersonTabList = JSON.parse(JSON.stringify(this.tabMenu['accept_change']))
        this.tabList = tabCopyList
        // 查询当前是否是受理办案人还是变更协办人
        const res = await viewApl_admre_audit(this.$route.params.applyid)
        if (res.code == 0) {
          // 变更协办人
          if (res.data && res.data.type == Tp_proctypeValue.ACCEPT_CHANGE_SECONDPER) {
            this.isSecondDepr = true
          }
        }
        this.changePersonTabList = changePersonTabList
        if (this.activeKey == '' || this.activeKey == null || this.activeKey == undefined) {
          this.activeKey = this.tabList[0].key
          let category = this.category
          if (this.category == 'acceptview') {
            // 获取当前的主流程
            const modelKey = this.$route.params.modelKey
            if (_this.ModelKey[modelKey].categoryValue) {
              category = _this.ModelKey[modelKey].categoryValue
            }
          }

          this.tabList.forEach(item => {
            if (item.categoryKey == category) {
              this.activeKey = item.key
            }
          })
        }
      }
    },

    // 审理环节初始化
    async hearInit () {
      const _this = this
      if (this.category in this.tabMenu) {
        // 深拷贝一份
        let tabCopyList = JSON.parse(JSON.stringify(this.tabMenu[this.category]))
        // 如果是执行环节 该页面要显示受理的页面内容
        if (this.category == 'perform_upload' || this.category == 'force_upload') {
          tabCopyList = JSON.parse(JSON.stringify(this.tabMenu['hear']))
        }
        this.tabList = tabCopyList
        // 对于申请步骤的情况进行特殊处理
        const surveyTabCopyList = JSON.parse(JSON.stringify(this.tabMenu['survey_inner']))
        this.surveyTabList = surveyTabCopyList
        // 对于变更人员步骤情况的特殊处理
        // 对于 变更处理人的特殊处理
        const changePersonTabList = JSON.parse(JSON.stringify(this.tabMenu['hear_change']))
        // 查询当前是否是受理办案人还是变更协办人
        const aduitRes = await viewApl_admre_audit(this.$route.params.applyid)
        if (aduitRes.code == 0) {
          // 变更协办人
          if (aduitRes.data && aduitRes.data.type == Tp_proctypeValue.HEAR_CHANGE_SECONDPER) {
            this.isSecondDepr = true
          }
        }
        this.changePersonTabList = changePersonTabList
        // 若是中止-  则无需改动
        // 查询对应数据的状态
        const _this = this
        const res = await getSonStatusByIds({ applyid: this.applyid })
        if (res.code !== 0) {
          _this.$message.error('查询子流程失败')
        } else {
          _this.sonStatus = res.data.sonStatus
          const isrest = res.data.isrest // 是否中止
          // 决定类型, 由决定类型的id来决定
          const res3 = await getProcessVariable(this.$route.params.processinstanceid)
          let variableMap = {}
          if (res3.code == 0) {
            variableMap = res3.data || {}
          }
          this.decisiontype = res.data.decisiontypeid || variableMap.decisiontypeid // 决定类型
          _this.reason = res.data.reason // 案由
          _this.admreview = res.data.admreview // 主表记录
          console.log('子流程状态', _this.sonStatus)
          // 判断决定类型是否有值 -若有值则为决定阶段展示
          if (isrest) {
            // 若是中止子流程状态
            // 若是中止-恢复， 需要修改中止的配置为中止恢复
            for (const index in this.tabList) {
              if (this.tabList[index].key == 'hear_rest') {
                this.tabList[index] = hear_restoreProctype
              }
            }
          }
          if (this.activeKey == '' || this.activeKey == null || this.activeKey == undefined) {
            this.activeKey = this.tabList[0].key
            // 若当前的步骤是调查的子流程之一，则此时定位的活动的key为调查步骤
            if (survey_category.includes(this.category)) {
              this.activeKey = 'hear_survey' // 调查步骤
            } else {
              this.tabList.forEach(item => {
                if (item.categoryKey == _this.category) {
                  this.activeKey = item.key
                }
              })
            }
          }
        }
      }
    },

    // 决定环节初始化 -弃用
    // executeInit () {
    //   const _this = this
    //   const tabCopyList = JSON.parse(JSON.stringify(this.tabMenu['executeview']))
    //   this.tabList = tabCopyList
    //   // 对于决定步骤的情况特殊处理
    //   this.categoryType = 'execute'
    //   if (this.activeKey == '' || this.activeKey == null || this.activeKey == undefined) {
    //     if (this.tabList && this.tabList.length > 0) {
    //       this.activeKey = this.tabList[0].key
    //     }
    //     // 若是对应的子流程激活中 则默认定位到子流程中
    //     this.tabList.forEach((item) => {
    //       if (item.categoryKey == this.category) {
    //         this.activeKey = item.key
    //       }
    //     })
    //   }
    // },

    // tab页切换
    changeTab (key) {
      this.activeKey = key
    },
    changeSurveyTab (key) {
      this.surveyTabKey = key
    },
    changeHearingTab (key) {
      this.hearingTabKey = key
    },
    changePersonTab (key) {
      this.changePersonTabKey = key
    },
    async gotoTab (category) {
      this.activeKey = this.tabList[0].key
      const res = await getSonStatusByIds({ applyid: this.applyid })
      if (res.code !== 0) {
        this.$message.error('查询子流程失败')
      } else {
        this.sonStatus = res.data.sonStatus
        const isrest = res.data.isrest // 是否中止
        if (isrest) {
          // 若是中止-恢复， 需要修改中止的配置为中止恢复，后续补充该方法
          for (const index in this.tabList) {
            if (this.tabList[index].key == 'hear_rest') {
              this.tabList[index] = hear_restoreProctype
            }
          }
        }
        if (survey_category.includes(this.category)) {
          this.activeKey = 'hear_survey' // 调查步骤
        } else {
          this.tabList.forEach(item => {
            if (item.categoryKey == category) {
              this.activeKey = item.key
            }
          })
        }
      }
    }
  },
  components: {
    CaseHandleProcedure: () => import('@/views/handleCase/accept/CaseHandleProcedure.vue'),
    CaseHandleDecision: () => import('@/views/handleCase/accept/CaseHandleDecision.vue'),
    ApplyCaseHandleProcedure: () => import('@/views/handleCase/apply/ApplyCaseHandleProcedure.vue'),
    ChangePersonProcedure: () => import('@/views/handleCase/apply/ChangePersonProcedure.vue'),
    ExecuteHandleProcedure: () => import('@/views/handleCase/execute/ExecuteHandleProcedure.vue'),
    Wf_ProcessNext: () => import('@/views/workflow/Wf_ProcessNext.vue'),
    ThirdPersonProcessMaterial: () => import('@/views/accept/material/ThirdPersonProcessMaterial.vue'),
    CaseHandleChangePerson: () => import('@/views/handleCase/accept/CaseHandleChangePerson.vue')
  }
}
</script>

<style scoped lang="less">
.tabsBox {
  height: 65vh;
  overflow: auto;
  .nextCore {
    padding: 0 !important;
  }
  .add_form_label {
    color: #000 !important;
  }
  ::v-deep .ant-tabs-tab {
    background-color: rgba(240, 240, 240, 0.44) !important;
    color: #000000 !important;
    box-shadow: 0px 0px 46px 0px rgba(240, 240, 240, 0.44) !important;
    min-width: 140px !important;
    text-align: center;
    height: 50px !important;
    line-height: 50px !important;
  }
  ::v-deep .ant-tabs-nav-container {
    height: 50px !important;
  }
  ::v-deep .ant-tabs-tab-active {
    background-color: #fff !important;
    color: #0072c6 !important;
  }
  ::v-deep .ant-tabs-ink-bar {
    width: 120px !important;
  }
  .case {
    ::v-deep .ant-tabs-nav-container {
      height: 50px !important;
      border-bottom: 1px solid #f5f5f5;
    }
    ::v-deep .ant-tabs-tab {
      background-color: #fff !important;
      color: #000000 !important;
      // box-shadow: 0px 0px 46px 0px rgba(240, 240, 240, 0.44) !important;
      min-width: 140px !important;
      // text-align: center;
      height: 50px !important;
      // opacity: 0.65;
      line-height: 50px !important;
      padding: 0 !important;
    }
    ::v-deep .ant-tabs-tab-active {
      background-color: #fff !important;
      color: #0072c6 !important;
    }
    ::v-deep .ant-tabs-ink-bar {
      width: 90px !important;
      // margin-top: 10px;
      margin-left: 24px !important;
    }
    // ::v-deep .ant-tabs-nav-scroll {
    //   background-color: #f3f3f5 !important;
    // }
    // ::v-deep .ant-tabs-tab-active {
    //   margin-left: 10px !important;
    //   padding: 6px;
    // }
  }
  .survey {
    ::v-deep .ant-tabs-nav-container {
      height: 50px !important;
      border-bottom: 1px solid #f5f5f5;
    }
    ::v-deep .ant-tabs-tab {
      background-color: #fff !important;
      color: #000000 !important;
      box-shadow: 0px 0px 46px 0px rgba(240, 240, 240, 0.44) !important;
      min-width: 140px !important;
      text-align: center;
      height: 50px !important;
      // opacity: 0.65;
      padding: 0 !important;
    }
    ::v-deep .ant-tabs-tab-active {
      background-color: #fff !important;
      color: #0072c6 !important;
    }
    ::v-deep .ant-tabs-ink-bar {
      width: 50px !important;
      // margin-top: 10px;
      margin-left: 46px !important;
    }
  }
}
</style>
